<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import SvgIcon from "@/components/common/SvgIcon.vue";
import MyInput from "@/components/common/MyInput.vue";
import {useRouter} from "vue-router";
import SelectButton from "@/components/common/SelectButton.vue";
import { getCurrentInstance } from 'vue'
import {authApi} from "@/api/blog/authApi.ts";
import Dialog from "@/components/common/Dialog.vue";
const {
  proxy: { $Message }
} = getCurrentInstance() as any
const router = useRouter()
const isLogin = ref(true);
const isAccount = ref(true);
const move = () => {
  isLogin.value = !isLogin.value;
}
const info = computed(()=>{
  return isLogin.value? '还有没有账户？点击注册' : '已有账户？点击登录';
})
const dialog = ref({
  visible: false,
  title: '忘记密码？'
})
const isSavePassword = ref(false);
const isAgree = ref(false)
const loginParam = ref({
  account: '',
  email: '',
  password: '',
  code: ''
});
const registerParam = ref({
  avatar: '',
  account: '',
  password: '',
  email: '',
  code: '',
  inviteCode: ''
})
const forgetPassword = ref({
  email: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
})
const loginBtn = () => {
  if(isSavePassword.value){
    localStorage.setItem('account', JSON.stringify(loginParam.value))
  }else {
    localStorage.removeItem('account')
  }
  if(!isAgree.value) {
    $Message('请先同意用户协议', 'warning',true)
    return
  }
  // 登录
  if (isAccount.value){
    authApi.login({
      account: loginParam.value.account,
      password: loginParam.value.password
    }).then(res=>{
      if(res.code === 200){
        localStorage.setItem('token', res.data)
        // location.reload()
        router.push('/')
      }
    })
  }else {
    authApi.loginByEmail({
      email: loginParam.value.email,
      code: loginParam.value.code
    }).then(res=>{
      if(res.code === 200){
        localStorage.setItem('token', res.data)
        router.push('/')
      }
    })
  }
}
const registerBtn = () => {
  if(!isAgree.value) {
    $Message('请先同意用户协议', 'warning',true)
    return
  }
  // 注册
  authApi.register({
    avatar: '',
    account: registerParam.value.account,
    password: registerParam.value.password,
    email: registerParam.value.email,
    code: registerParam.value.code,
    inviteCode: registerParam.value.inviteCode
  }).then(res=>{
    if(res.code === 200){
      localStorage.setItem('token', res.data)
      // location.reload()
      router.push('/')
    }
  })
}
const forgetPasswordBtn = () => {
  authApi.forgetPassword({
    email: forgetPassword.value.email,
    code: forgetPassword.value.code,
    newPassword: forgetPassword.value.newPassword,
    confirmPassword: forgetPassword.value.confirmPassword
  }).then(res=>{
    if(res.code === 200){
      $Message('发送成功', 'success',true)
    }else {
      $Message(res.msg, 'error',true)
    }
  })
}
const sendMailCode = (email:string,type?:number) => {
  if(!email){
    $Message('请输入邮箱', 'warning',true)
    return
  }
  authApi.sendMailCode(email,type).then(res=>{
    if(res.code === 200){
      $Message('发送成功', 'success',true)
    }else {
      $Message(res.msg, 'error',true)
    }
  })
}
onMounted(()=>{
  // 获取本地保存的账号
  if(localStorage.getItem('account')){
    loginParam.value = JSON.parse(localStorage.getItem('account') as string)
  }
})
</script>

<template>
  <div class="login-card">
    <!--注册tab-->
    <div class="login">
      <div class="logo">
        <SvgIcon class-name="icon" icon-class="logo-logo" />
<!--        <img class="logo-img" src="@/assets/logo.png" alt="">-->
      </div>
      <div class="login-main">
        <div class="login-type">
          <div :class="{selected:isAccount, 'login-type-item':true}" @click="isAccount=true">账号登录</div>
          <div :class="{selected:!isAccount, 'login-type-item':true}" @click="isAccount=false">邮箱登录</div>
        </div>
        <div class="login-area" >
          <MyInput v-if="isAccount" placeholder="账号" v-model:context="loginParam.account">
            <template #left-icon><SvgIcon class-name="icon" icon-class="input-用户" /></template>
          </MyInput>
          <MyInput v-if="isAccount" placeholder="密码" input-type="password" v-model:context="loginParam.password">
            <template #left-icon><SvgIcon class-name="icon" icon-class="input-密码" /></template>
          </MyInput>
          <MyInput v-if="!isAccount" placeholder="邮箱" v-model:context="loginParam.email">
            <template #left-icon><SvgIcon class-name="icon" icon-class="input-邮箱" /></template>
          </MyInput>
          <MyInput v-if="!isAccount" placeholder="验证码" focus-color="#e6e8eb" input-type="code" v-model:context="loginParam.code">
            <template #left-icon><SvgIcon class-name="icon" icon-class="input-印章" /></template>
            <template #right-icon>
              <div class="code-btn" @click="sendMailCode(loginParam.email)">
                <div class="code-btn-line"></div>
                获取验证码
              </div>
            </template>
          </MyInput>
          <div class="login-password">
            <div class="remember-password">
              <SelectButton v-model:is-selected='isSavePassword' />
              <span>记住密码</span>
            </div>
            <div class="forget-password" @click="dialog.visible=true">忘记密码？</div>
          </div>
        </div>
        <div class="login-card-btn" @click="loginBtn">
          登录
        </div>
        <div class="agreement">
          <SelectButton v-model:is-selected='isAgree' />
          <div class="agreement-text">
            <span>登录即视为同意</span>
            <a href="#">用户服务协议</a>
            <a href="#">隐私政策</a>
            <a href="#">授权许可协议</a>
          </div>
        </div>
      </div>
    </div>
    <!--登录tab-->
    <div class="register">
      <div class="register-main">
        <MyInput placeholder="账号" v-model:context="registerParam.account">
          <template #left-icon><SvgIcon class-name="icon" icon-class="input-用户" /></template>
        </MyInput>
        <MyInput placeholder="密码" input-type="password" v-model:context="registerParam.password">
          <template #left-icon><SvgIcon class-name="icon" icon-class="input-密码" /></template>
        </MyInput>
        <MyInput placeholder="邮箱" v-model:context="registerParam.email">
          <template #left-icon><SvgIcon class-name="icon" icon-class="input-邮箱" /></template>
        </MyInput>
        <MyInput placeholder="验证码" focus-color="#e6e8eb" input-type="code" v-model:context="registerParam.code">
          <template #left-icon><SvgIcon class-name="icon" icon-class="input-印章" /></template>
          <template #right-icon>
            <div class="code-btn" @click="sendMailCode(registerParam.email, 1)">
              <div class="code-btn-line"></div>
              获取验证码
            </div>
          </template>
        </MyInput>
        <MyInput placeholder="邀请码" v-model:context="registerParam.inviteCode">
          <template #left-icon><SvgIcon class-name="icon" icon-class="input-印章" /></template>
        </MyInput>
        <div class="login-card-btn" @click="registerBtn">
          注册
        </div>
        <div class="agreement">
          <SelectButton v-model:is-selected='isAgree' />
          <div class="agreement-text">
            <span>注册即视为同意</span>
            <a href="#">用户服务协议</a>
            <a href="#">隐私政策</a>
            <a href="#">授权许可协议</a>
          </div>
        </div>
      </div>
    </div>
    <!--遮罩-->
    <div :class="{'image-mask': true, 'move-mask': isLogin}">
      <div @click="move">
        {{ info }}
        <SvgIcon class-name="icon" icon-class="change" />
      </div>
    </div>
    <Dialog v-model:visible="dialog.visible" :title="dialog.title">
      <template #content>
        <div class="dialog-content">
          <div class="dialog-content-text">
            请输入注册邮箱，我们将发送一封邮件至您的邮箱，请按照邮件中的提示进行操作。
          </div>
          <div class="dialog-content-input">
            <MyInput placeholder="邮箱" v-model:context="forgetPassword.email">
              <template #left-icon><SvgIcon class-name="icon" icon-class="input-邮箱" /></template>
            </MyInput>
            <MyInput placeholder="验证码" focus-color="#e6e8eb" input-type="code" v-model:context="forgetPassword.code">
              <template #right-icon>
                <div class="code-btn" @click="sendMailCode(forgetPassword.email)">
                  <div class="code-btn-line"></div>
                  获取验证码
                </div>
              </template>
            </MyInput>
            <MyInput  placeholder="新密码" input-type="password" v-model:context="forgetPassword.newPassword">
              <template #left-icon><SvgIcon class-name="icon" icon-class="input-密码" /></template>
            </MyInput>
            <MyInput  placeholder="确认密码" input-type="password" v-model:context="forgetPassword.confirmPassword">
              <template #left-icon><SvgIcon class-name="icon" icon-class="input-密码" /></template>
            </MyInput>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <div class="dialog-footer-btn" @click="dialog.visible=false">
            取消
          </div>
          <div class="dialog-footer-btn" @click="forgetPasswordBtn">
            确定
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<style scoped lang="less">
.login,.register,.logo{
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  z-index: 1;
  width: 896px;
  height: 528px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  //position: relative;
  .login{
    width: 448px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    .logo{
      width: 120px;
      height: 120px;
      display: flex;
      flex-direction: column;
      .icon{
        width: 120px;
        height: 120px;
        color: #EB5C88;
      }
    }
    .login-main{
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      .icon{
        width: 16px;
        height: 16px;
        color: #C8C8C8;
      }
      .login-type{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 64px;
        .login-type-item{
          color: #999999;
          font-size: 16px;
          font-weight: bold;
          line-height: 23px;
          cursor: pointer;
        }
        .selected{
          position: relative;
          color: #333333;
          &::before{
            content: '';
            position: absolute;
            top: 32px;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 3px;
            background: #EB5C88;
          }
        }
      }
      .login-area{
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        .login-password{
          display: flex;
          justify-content: space-between;
          color: #666666;
          font-size: 14px;
          line-height: 20px;
          .remember-password{
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
          }
          .forget-password{
            cursor: pointer;
          }
        }
      }
    }
  }
  .register{
    width: 448px;
    padding: 40px;
    .register-main{
      display: flex;
      flex-direction: column;
      gap: 12px;
      .icon{
        width: 16px;
        height: 16px;
        color: #C8C8C8;
      }
    }
  }
  .login-card-btn{
    width: 368px;
    height: 44px;
    margin-top: 24px;
    background-color: #EB5C88;
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .agreement{
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    .agreement-text{
      color: #666666;
      font-size: 12px;
      line-height: 17px;
      a{
        margin: 0 4px;
        color: #EB5C88;
        text-decoration: none;
      }
    }
  }
  .image-mask{
    position: absolute;
    z-index: 999;
    width: 448px;
    height: 528px;
    //background-color: #ffffff;
    background-image: url("@/assets/login-bg.webp");
    background-size: 100%;
    &:hover{
      background-size: 110%;
      background-position: -15px -20px;
    }
    transition: all 0.5s;
    & > div{
      margin-top: 16px;
      height: 40px;
      color: #EB5C88;
      font-size: 16px;
      font-weight: bold;
      line-height: 23px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon{
        margin-left: 8px;
        width: 16px;
        height: 16px;
      }
      &::after{
        z-index: -1;
        content: '';
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 368px;
        height: 40px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 4.32%, rgba(255, 255, 255, 0.85) 21.02%, rgba(255, 255, 255, 0.85) 76.01%, rgba(255, 255, 255, 0) 100%);
        filter: blur(8px);
      }
    }
  }
}
.move-mask{
  transform: translateX(100%);
}
.dialog-footer{
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  .dialog-footer-btn{
    width: 100px;
    height: 32px;
    background-color: #ffffff;
    border: 1px solid #EB5C88;
    color: #EB5C88;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:last-child{
      background-color: #EB5C88;
      color: #ffffff;
    }
    &:hover{
      cursor: pointer;
    }
  }
}

.dialog-content{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  .dialog-content-text{
    color: #666666;
    font-size: 14px;
    line-height: 20px;
  }
  .dialog-content-input{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

}

.code-btn{
  font-size: 14px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  .code-btn-line{
    width: 1px;
    height: 26px;
    border-left: 1px solid #e6e8eb;
    margin-right: 20px;
  }
  &:hover{
    color: #EB5C88;
  }
}
</style>
